/*
 * @Author: 姚泽毅
 * @Date: 2021-08-29 10:24:58
 * @LastEditTime: 2021-08-29 14:47:20
 */
import { Card } from 'antd'
import React, { Component } from 'react'
import "./index.css"
const { Meta } = Card;

export default class List extends Component {
    render() {
        console.log(this.props);
        const { users, isFirstLoad, isLoading, isErr } = this.props
        return (
            <div className="list">
                {
                    isFirstLoad ? <h2>输入关键词后，回车或点击搜索按钮进行搜索GitHub用户</h2> :
                        isLoading ? <h2>Loading........</h2> :
                            isErr ? <h2 style={{ color: "red" }}>{isErr}</h2> :
                                users.length === 0 ? <h2>没有查询到当前用户</h2> :
                                    users.map(user => {
                                        return (
                                            <Card
                                                key={user.id}
                                                hoverable
                                                style={{ width: 240 }}
                                                cover={<img alt="avatar" src={user.avatar_url} />}
                                            >
                                                <Meta title={user.login} description={user.html_url} />
                                            </Card>
                                        )
                                    })
                }
            </div>
        )
    }
}
